
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link type="text/css" href="../resources/JqueryUI/css/redmond/jquery-ui-1.8.16.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="../resources/JqueryUI/js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="../resources/JqueryUI/js/jquery-ui-1.8.16.custom.min.js"></script>
        <script type="text/javascript" src="../resources/Malsup/jquery.form.js"></script>
        <script type="text/javascript" src="../resources/Jquery Timer/jquery.timer.js"></script>
        <script type="text/javascript">
			$(function(){
				$("#mensaje").hide();
				listar();
			});
			function listar(){
				$.post("accion_listar_usuarios.php",function(datos){
					$("#contenido").html(lista(datos));
				},"json");
			}
			
			function lista(datos){
				$("#button").button({
			text:true,
			icon:{
				primary:"ui-icon-circle-plus"}
		});
				$.each(datos.usuarios,function(indice,valor){
				$("#contenido").append("<tr id=\""+valor.id_usuario+"\"><td align=\"center\">"+valor.id_usuario+"</td><td align=\"center\">"+valor.nombre+"</td><td align=\"center\">"+valor.apellido+"</td><td align=\"center\">"+valor.nick+"</td><td align=\"center\">"+valor.email+"</td><td align=\"center\">"+valor.tel+"</td><td align=\"center\">"+valor.id_rol+"</td><td align=\"center\"><span2></span2></td><td align=\"center\"><span1></span1></td></tr>");
				});
				$("span1").button({
			text:false,
			icons:
				{
				primary:"ui-icon-trash"
				}
		})
		$("span2").button({
			text:false,
			icons:
				{
				primary:"ui-icon-pencil"
				}
		})
		$("#contenido tr td span1").bind("click",function(){  
			var ele=$(this).closest("tr");			
			borrar($(ele).attr("id"));
		});
		$("#contenido tr td span2").bind("click",function(){  
			var ele=$(this).closest("tr");			
			modificar($(ele).attr("id"));
		});	
			}
			function borrar(valor){
	$.post("accion_borrar_usuario.php",{"id":valor},function(datos){
		if (datos.op){			
			$("#mensaje").html("Se elimino correctamente");
			$("#mensaje").removeClass("ui-state-error");
			$("#mensaje").addClass("ui-state-highlight");
			$("#"+valor).slideUp();	
		}
		else{
			$("#mensaje").html("ERROR")
			$("#mensaje").removeClass("ui-state-highlight");
			$("#mensaje").addClass("ui-state-error");
		}
		$("#mensaje").slideDown("slow").delay(1000).slideUp("slow");
		},"json");	
}
				
		</script>
</head>

<body>
<div id="mensaje"> </div>
<form id="form1" name="form1" method="post" action="" class="ui-state-default">
  <table width="931" height="71" border="0">
    <tr>
      <td width="38" align="center">Id</td>
      <td width="133" align="center">Nombre</td>
      <td width="133" align="center">Apellido</td>
      <td width="81" align="center">Nick</td>
      <td width="134" align="center">E-mail</td>
      <td width="132" align="center">Telefono</td>
      <td width="100" align="center">Rol</td>
      <td align="center">Editar</td>
      <td align="center">Eliminar</td>
    </tr>
    <tbody id="contenido"></tbody>
    </table>
<a href="../Menu/menu.html" ><input a type="button" name="button" id="button" value="Volver" class="ui-state-default" /></a>
</form>
</body>
</html>